<template>
   <div class="mui-numbox" data-numbox-min='1' :data-numbox-max="max">
        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
        <input class="mui-input-numbox" type="number" ref="input" @change="changeNumber"/>
        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
</template>

<script >
    // 下面用到mui的js操作
    import mui from '../../lib/mui/js/mui.min.js'
    export default {
        data(){
        return {
            }
        },
        methods:{
            // 获取数字的值传给父组件
        changeNumber(){
            this.$emit('shopcarNumber',parseInt(this.$refs.input.value))
        }
        },
        props:["max"],
        mounted(){
            // 还获取不到
            // console.log(this.max)
        },
                // 因为列表页的max值是异步获取到的，还拿不到，用到监听
        watch:{
            // 监听max的值用js操作来设置
            max:function(oldValue,newValue){
                // 设置最大值
                mui('.mui-numbox').numbox().setOption('max',oldValue)
            }
        }
    }
</script>
<style lang="scss" scpoed>
    .mui-numbox{
        width: 120px;
        height: 25px;
    }

</style>